<script setup lang="ts">
import { ref } from 'vue'
const controlList = [
  {
    img: 'board',
    name: '出舱'
  },
  {
    img: 'reboard',
    name: '回舱'
  },
  {
    img: 'stop',
    name: '机巢急停'
  },
  {
    img: 'charging',
    name: '机巢上电'
  }
]
const moreList = [
  {
    title: '舱门',
    btnList: ['打开', '关闭', '调整']
  },
  {
    title: '升降器',
    btnList: ['打开', '关闭', '停止']
  },
  {
    title: '固定器X',
    btnList: ['打开', '关闭', '停止']
  },
  {
    title: '固定器Y',
    btnList: ['打开', '关闭', '停止']
  },
  {
    title: '灯光',
    btnList: ['打开', '关闭']
  }
]
const status = ref('regular')
const changeStatus = () => {
  // status.value === 'regular' && (status.value = 'more')
  // status.value === 'more' && (status.value = 'regular')
  if (status.value === 'regular') {
    status.value = 'more'
  } else status.value = 'regular'
}
const powerStatus = ref(true)
const handleClick = (status: boolean) => {
  powerStatus.value = status
}
</script>
<template>
  <div class="more-control-box">
    <div class="title-box">
      <span>机巢控制</span>
      <span class="cursor-pointer" @click="changeStatus">{{
        status === 'regular' ? '更多' : '返回'
      }}</span>
    </div>
    <div v-if="status == 'regular'" class="content-box">
      <div class="item-box" v-for="(item, index) in controlList" :key="index">
        <Icon class="icon" :icon="'svg-icon:' + item.img" :size="23" />
        <span style="margin-left: 15px">{{ item.name }}</span>
      </div>
      <div class="bottom">
        <div :class="{ 'blue-checked': powerStatus }" @click="handleClick(true)">
          <Icon class="icon" icon="svg-icon:action" :size="23" />
          <span>开机</span>
        </div>
        <div :class="{ 'blue-checked': !powerStatus }" @click="handleClick(false)">
          <Icon class="icon" icon="svg-icon:action" :size="23" />
          <span>关机</span>
        </div>
      </div>
    </div>
    <div v-else class="content-box more-content-box">
      <div class="content-item" v-for="(item, index) in moreList" :key="index">
        <span>{{ item.title }}:</span>
        <div class="btn-box" v-for="(btn, btnIndex) in item.btnList" :key="btnIndex">
          <div class="btn-item">{{ btn }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.blue-checked {
  background: linear-gradient(184deg, #01a7fc, #0665cb) !important;
  // background-color: red !important;
  color: white !important;
}
.more-control-box {
  background: rgba(9, 36, 74, 0.9);
  margin-bottom: 5px;

  .title-box {
    background: url('@/assets/bit-screen/schedule-mge/title_bg.png') center left;
    background-size: cover;
    padding-left: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding-right: 15px;
    color: #d9e4f2;
  }

  .content-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 5px 10px 10px;
    height: 146px;

    .item-box {
      width: 48%;
      height: 35px;
      color: #619eda;
      background: rgba(33, 111, 163, 0.45);
      border-radius: 2px;
      border: 1px solid #2b9ae7;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
    }

    .item-box:nth-child(1),
    .item-box:nth-child(2),
    .item-box:nth-child(4) {
      &:hover {
        background: linear-gradient(184deg, #01a7fc, #0665cb);
        color: white;
      }
    }

    .item-box:nth-child(3) {
      background: rgba(211, 165, 19, 0.6);
      border-radius: 2px;
      border: 1px solid #cdad1f;
      color: white;

      &:hover {
        background: #d3a513;
      }
    }

    .bottom {
      width: 98%;
      border-radius: 2px;
      display: flex;
      height: 35px;
      border: 1px solid #2b9ae7;

      > div {
        width: 50%;
        background: rgba(33, 111, 163, 0.45);
        border-radius: 2px;
        border: 1px solid #2b9ae7;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
      }

      > div:nth-child(1) {
        border: none;
        border-radius: 2px 0 0 2px;
      }

      > div:nth-child(2) {
        border: none;
        border-radius: 0 2px 2px 0;
      }
    }
  }
  .more-content-box {
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
    .content-item {
      display: flex;
      width: 100%;
      span {
        margin-right: 5px;
        width: 18%;
        text-align: right;
        font-size: 12px;
      }
      .btn-box {
        flex: 1;
        margin-bottom: 3px;
        display: flex;
        justify-content: space-around;
        .btn-item {
          border-radius: 2px;
          text-align: center;
          background: rgba(33, 111, 163, 0.45);
          border-radius: 2px;
          border: 1px solid #2b9ae7;
          flex: 1;
          cursor: pointer;
          margin-right: 5px;
          font-size: 12px;
        }
      }
    }
  }
}
/* 当视口高度大于或等于880px时，应用这些样式 */

@media screen and (min-height: 950px) {
  .more-control-box .content-box {
    height: 190px !important;
    padding-top: 15px;
  }
  .more-control-box .content-box .item-box {
    height: 45px;
    margin-bottom: 8px;
  }
  .more-control-box .bottom {
    height: 45px !important;
  }
  .more-content-box .btn-box {
    height: 26px;
    line-height: 26px;
  }
}
</style>
